<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <div>
        <label>相机类型：</label>
        <el-radio v-model="cameraType" label="PerspectiveCamera" @change="radioChange">透视相机</el-radio>
        <el-radio v-model="cameraType" label="OrthographicCamera" @change="radioChange">正投影相机</el-radio>
      </div>
      <el-collapse accordion>
        <div>
          <el-collapse-item v-for="(item,key) in properties" :key="key" :title="item.name">
            <el-col v-for='(paramsItem,paramsItemKey) in item.params' :key="paramsItemKey">
              <el-col :span="5">
                <span class="vertice-span">{{ paramsItem.name }}</span>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="paramsItem.value" :format-tooltip="formatTooltip" :max="paramsItem.max"
                           :min="paramsItem.min" :step="paramsItem.step"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{ paramsItem.value }}</span>
              </el-col>
            </el-col>
          </el-collapse-item>
        </div>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'

export default {
  data() {
    return {
      cameraType: 'PerspectiveCamera',
      sliderProperties: {
        position: {
          name: '相机位置-position',
          params: {
            positionX: {
              name: 'x',
              value: 120,
              min: -1800,
              max: 1800,
              step: 1
            },
            positionY: {
              name: 'y',
              value: 60,
              min: -1800,
              max: 1800,
              step: 1
            },
            positionZ: {
              name: 'z',
              value: 180,
              min: -1800,
              max: 1800,
              step: 1
            }
          }
        },
        lookAt: {
          name: '相机方向',
          params: {
            lookAtX: {
              name: 'x',
              value: 0,
              min: -180,
              max: 180,
              step: 1
            },
            lookAtY: {
              name: 'y',
              value: 0,
              min: -180,
              max: 180,
              step: 1
            },
            lookAtZ: {
              name: 'z',
              value: 0,
              min: -180,
              max: 180,
              step: 1
            }
          }
        },
        PerspectiveCameraParams: {
          name: '相机参数',
          params: {
            fov: {
              name: '视场',
              value: 45,
              min: 0,
              max: 360,
              step: 1
            },
            aspect: {
              name: '长宽比',
              value: 2,
              min: 0.1,
              max: 10,
              step: 0.1
            },
            near: {
              name: '近面',
              value: 0.1,
              min: 0.1,
              max: 100,
              step: 0.1
            },
            far: {
              name: '远面',
              value: 1000,
              min: 100,
              max: 10000,
              step: 10
            }
          }
        },
        OrthographicCameraParams: {
          name: '相机参数',
          params: {
            left: {
              name: '左边界',
              value: -150,
              min: -1000,
              max: 0,
              step: 1
            },
            right: {
              name: '右边界',
              value: 230,
              min: 0,
              max: 1000,
              step: 1
            },
            top: {
              name: '上边界',
              value: -50,
              min: -500,
              max: 0,
              step: 1
            },
            bottom: {
              name: '下边界',
              value: 360,
              min: 0,
              max: 500,
              step: 1
            },
            near: {
              name: '近面',
              value: 200,
              min: -1000,
              max: 100,
              step: 10
            },
            far: {
              name: '远面',
              value: 300,
              min: 100,
              max: 10000,
              step: 10
            }
          }
        }
      },
      planeGeometry: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  computed: {
    properties() {
      let obj = {}
      for (let key in this.sliderProperties) {
        if (
            this.sliderProperties[key].name !== '相机参数' ||
            !key.indexOf(this.cameraType)
        ) {
          obj[key] = this.sliderProperties[key]
        }
      }
      return obj
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    formatTooltip(val) {
      return val
    },
    radioChange(value) {
      if (value === 'PerspectiveCamera') {
        this.sliderProperties.lookAt.params.lookAtX.value = 0
        this.sliderProperties.lookAt.params.lookAtY.value = 0
        this.sliderProperties.lookAt.params.lookAtZ.value = 0
      } else {
        this.sliderProperties.lookAt.params.lookAtX.value = 25
        this.sliderProperties.lookAt.params.lookAtY.value = -135
        this.sliderProperties.lookAt.params.lookAtZ.value = 70
      }
    },
    // 初始化
    init() {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createCube() // 创建方块
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene() {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh() {
      this.planeGeometry = new THREE.PlaneGeometry(180, 180) // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
      }) // 材质对象Material
      const plane = new THREE.Mesh(this.planeGeometry, planeMaterial)

      // 设置平面位置
      plane.rotation.x = -0.5 * Math.PI
      plane.position.set(0, 0, 0)
      plane.receiveShadow = true

      // 平面对象添加到场景中
      this.scene.add(plane)
    },
    // 创建光源
    createLight() {
      // 创建方向光
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7)
      directionalLight.position.set(-20, 40, 60)
      this.scene.add(directionalLight)

      // 环境光
      const ambientLight = new THREE.AmbientLight(0x292929)
      this.scene.add(ambientLight)
    },
    // 创建相机
    createCamera() {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)

      this.camera.position.set(120, 60, 180) // 设置相机位置
      console.log(this.scene.position)
      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.setClearColor(0xeeeeee, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },
    // 更新相机属性
    updateCameraProperties() {
      if (this.cameraType === 'PerspectiveCamera') {
        this.camera = new THREE.PerspectiveCamera(
            this.sliderProperties.PerspectiveCameraParams.params.fov.value, // 视场
            this.sliderProperties.PerspectiveCameraParams.params.aspect.value, // 长宽比
            this.sliderProperties.PerspectiveCameraParams.params.near.value, // 近面
            this.sliderProperties.PerspectiveCameraParams.params.far.value // 远面
        )
        this.camera.position.set(
            this.sliderProperties.position.params.positionX.value,
            this.sliderProperties.position.params.positionY.value,
            this.sliderProperties.position.params.positionZ.value
        )
        this.camera.lookAt(
            new THREE.Vector3(
                this.sliderProperties.lookAt.params.lookAtX.value,
                this.sliderProperties.lookAt.params.lookAtY.value,
                this.sliderProperties.lookAt.params.lookAtZ.value
            )
        )
      } else {
        this.camera = new THREE.OrthographicCamera(
            this.sliderProperties.OrthographicCameraParams.params.left.value, // 左边界
            this.sliderProperties.OrthographicCameraParams.params.right.value, // 右边界
            this.sliderProperties.OrthographicCameraParams.params.top.value, // 上边界
            this.sliderProperties.OrthographicCameraParams.params.bottom.value, // 下边界
            this.sliderProperties.OrthographicCameraParams.params.near.value, // 近面
            this.sliderProperties.OrthographicCameraParams.params.far.value // 远面
        )
        this.camera.position.set(
            this.sliderProperties.position.params.positionX.value,
            this.sliderProperties.position.params.positionY.value,
            this.sliderProperties.position.params.positionZ.value
        )
        this.camera.lookAt(
            new THREE.Vector3(
                this.sliderProperties.lookAt.params.lookAtX.value,
                this.sliderProperties.lookAt.params.lookAtY.value,
                this.sliderProperties.lookAt.params.lookAtZ.value
            )
        )
        this.planeGeometry.scale = new THREE.Vector3(20, 20, 20)
      }
    },
    createCube() {
      const cubeGeometry = new THREE.BoxGeometry(4, 4, 4) // 创建几何对象geom

      for (let j = 0; j < this.planeGeometry.parameters.height / 5; j++) {
        for (let i = 0; i < this.planeGeometry.parameters.width / 5; i++) {
          const rnd = Math.random() * 0.75 + 0.25
          const cubeMaterial = new THREE.MeshLambertMaterial() // 创建材质对象material
          cubeMaterial.color = new THREE.Color(rnd, 0, 0)
          const cube = new THREE.Mesh(cubeGeometry, cubeMaterial) // 创建网格对象cube

          cube.position.z =
              -(this.planeGeometry.parameters.height / 2) + 2 + j * 5
          cube.position.x =
              -(this.planeGeometry.parameters.width / 2) + 2 + i * 5
          cube.position.y = 2

          this.scene.add(cube) // 将网格对象添加到场景
        }
      }
    },
    render() {
      this.updateCameraProperties()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.controls-box {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}

.vertice-span {
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>

